<template>
  <div class="app-container">
    <el-dialog :title="titleList[flag]" :visible.sync="dialogVisible" width="50%">
      <div v-loading="loading">
        <div class="myTitle">基本信息</div>
      <el-form ref="form" :model="form" :disabled="flag==1">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="产品名称" prop="productId" required>
              <div v-if="flag==1">{{form.productName}}</div>
              <el-select v-else v-model="form.productId" filterable style="width: 100%" @change="changeGood">
                <el-option
                  v-for="item in goodList"
                  :key="item.id"
                  :label="item.productName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格来源" prop="skuSource" required>
              <dict-tag v-if="flag==1" :options="dict.type.basic_good_source" :value="form.skuSource"/>
              <el-select v-else v-model="form.skuSource" filterable  style="width: 100%">
                <el-option
                  v-for="item in dict.type.basic_good_source"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格名称" prop="skuName" required>
              <div v-if="flag==1">{{form.skuName}}</div>
              <el-input v-else v-model="form.skuName" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="规格编码" prop="skuCode" required>
              <div v-if="flag==1">{{form.skuCode}}</div>
              <el-input v-else v-model="form.skuCode" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现有库存" prop="quantity">
              <div v-if="flag==1">{{form.quantity||'-'}}</div>
              <el-input v-else v-model="form.quantity" placeholder="请输入" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="锁定库存" prop="lockInventory">
              <div v-if="flag==1">{{form.lockInventory||'-'}}</div>
              <el-input v-else v-model="form.lockInventory" placeholder="请输入" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="安全库存" prop="safeInventory" required>
              <div v-if="flag==1">{{form.safeInventory||'-'}}</div>
              <el-input v-else type="number" v-model="form.safeInventory" placeholder="请输入" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购价(元)" prop="purchase">
              <div v-if="flag==1">{{form.purchase||'-'}}</div>
              <el-input v-else type="number" v-model="form.purchase" placeholder="请输入"  :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本价(元)" prop="costPrice">
              <div v-if="flag==1">{{form.costPrice||'-'}}</div>
              <el-input v-else type="number" v-model="form.costPrice" placeholder="请输入"  :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="零售价(元)" prop="price" required>
              <div v-if="flag==1">{{form.price||'-'}}</div>
              <el-input v-else type="number" v-model="form.price" placeholder="请输入"  :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最低零售价(元)" prop="minPrice" required>
              <div v-if="flag==1">{{form.minPrice||'-'}}</div>
              <el-input v-else v-model="form.minPrice" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片" prop="imageUrl" required>
              <div v-if="flag==1">
                <div class="myImg" v-if="form.imageUrl">
                  <el-image
                    :src="form.imageUrl"
                    fit="contain"
                    :preview-src-list="[form.imageUrl]"
                  >
                  </el-image>
                </div>
                <div v-else>暂无</div>
              </div>
              <div v-else>
                <div class="myImg" v-if="form.imageUrl">
                  <i class="el-icon-close" @click="form.imageUrl=null"></i>
                  <el-image
                    :src="form.imageUrl"
                    fit="contain"
                    :preview-src-list="[form.imageUrl]"
                  >
                  </el-image>
                </div>
                <el-upload
                  v-else
                  :headers="headers"
                  :action="action"
                  :on-success="uploadSuccess"
                  :on-progress="uploadProgress"
                  :show-file-list="false"
                  accept=".jpg,.jpeg,.png"
                >
                  <el-button type="primary" plain>点击上传</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="skuForm" :model="skuForm" :disabled="flag==1">
        <div class="myTitle">规格属性</div>
        <!--  定制只选则isPrice=0-->
        <div v-if="form.skuSource==2" style="display: flex;flex-wrap: wrap;">
          <div v-for="val in attrList.filter(e=>e.isPrice==0)" style="width: 32%;margin-right: 10px">
              <el-form-item :label="val.attributeName+(val.unit?'('+val.unit+')':'')" :prop="val.id.toString()"
                            required>
                <el-input v-if="!val.skuValueList.length" v-model="skuForm[val.id.toString()]" placeholder="请输入"/>
                <el-select v-if="val.skuValueList.length" v-model="skuForm[val.id.toString()]" filterable clearable
                           style="width: 100%">
                  <el-option
                    v-for="item in val.skuValueList"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
          </div>
        </div>
        <!--  非定制ismust必传-->
        <div v-else style="display: flex;flex-wrap: wrap;">
          <div  v-for="val in attrList"  style="width: 32%;margin-right: 10px">
            <el-form-item :label="val.attributeName+(val.unit?'('+val.unit+')':'')" :prop="val.id.toString()"
                          :required="val.isMust==0">
              <el-input v-if="!val.skuValueList.length" v-model="skuForm[val.id.toString()]" placeholder="请输入"/>
              <el-select v-if="val.skuValueList.length" v-model="skuForm[val.id.toString()]" filterable clearable
                         style="width: 100%">
                <el-option
                  v-for="item in val.skuValueList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="dialogOk" v-if="flag!=1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addGoodSku, listGoodAttrSelect, updateGoodSku} from "../../../api/goodMng";
import {listGood} from "../../../api/imsMng";
import {getToken} from "@/utils/auth";

export default {
  dicts:['basic_good_source'],
  data() {
    return {
      flag: 0,
      loading: false,
      dialogVisible: false,
      open: false,
      form: {},
      skuForm: {},
      goodList:[],
      attrList:[],
      titleList: ['新增', '详情', '修改'],
      typeList: ['商品', '配件', '物料'],
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      action: process.env.VUE_APP_BASE_API + '/ims/product/image/upload',
    }
  },
  methods: {
    show(flag, form) {
      this.dialogVisible = true
      this.flag = flag
      this.attrList=[]
      this.form={}
      this.skuForm={}
      this.resetForm('form')
      this.resetForm('skuForm')
      this.form = form
      this.form.productType = Number(this.form.tabIndex) + 1
      this.load()
      if(flag){
        this.changeGood()
        this.form.skuAttrRelationList.map(val=>{
          this.$set(this.skuForm,val.skuAttributeId,val.value)
        })
      }
    },
    load(){
      listGood({productType: this.form.productType, pageNum: 1, pageSize: -1}).then(res => {
        this.goodList = res.rows
      })
    },
    changeGood(){
      this.loading=true
      listGoodAttrSelect({productId:this.form.productId}).then(res => {
        this.attrList = res.rows
      }).finally(e=>{
        this.loading=false
      })
    },
    uploadProgress() {
      this.loading = true
    },
    uploadSuccess(res) {
      this.loading = false
      if (res.code == 200) {
        this.$set(this.form, 'imageUrl', res.data.imageUrl)
      } else {
        this.$message.error(res.msg)
      }
    },
    dialogOk() {
      this.$refs.form.validate(e => {
        if (e) {
          this.$refs.skuForm.validate(e => {
            if(e){
              let req = JSON.parse(JSON.stringify(this.form))
              let list=[]
              for (let val in this.skuForm){
                list.push({
                  skuAttributeId:val,
                  value:this.skuForm[val],
                })
              }
              req.skuAttrRelationList=list
              this.loading=true
              if (this.flag) {
                updateGoodSku(req).then(res => {
                  this.$emit('ok')
                  this.dialogVisible = false
                  this.$message.success('修改成功')
                }).finally(e=>{
                  this.loading=false
                })
              } else {
                addGoodSku(req).then(res => {
                  this.$emit('ok')
                  this.dialogVisible = false
                  this.$message.success('新增成功')
                }).finally(e=>{
                  this.loading=false
                })
              }
            }
          })
        }
      })
    }
  }
}
</script>
